import React from "react";
import { Table, Button, Input, Space, Empty } from "antd";
import { SearchOutlined, PlusOutlined } from "@ant-design/icons";
import "./myTemplate1.css";
import { debounceAsync } from "../../utils/common/debounce";
import { hb } from "../../utils/common";

const MyTemplate1 = ({
  title,
  searchProps,
  addButtonProps,
  columns,
  dataSource,
  loading,
  pagination,
  onPageChange,
}) => {
  return (
    <div className="page-template-container">
      <div className="page-header">
        <Input
          {...{
            ...searchProps,
            onChange: debounceAsync(searchProps.onChange, 1000),
          }}
          prefix={<SearchOutlined style={{ color: "#94a3b8" }} />}
          className="search-input"
        />
        <Button
          type="primary"
          icon={<PlusOutlined />}
          className="add-button"
          {...addButtonProps}
        >
          {addButtonProps?.text || "新增"}
        </Button>
      </div>

      <Table
        locale={{ emptyText: <Empty description="暂无数据"></Empty> }}
        className="data-table"
        columns={columns.map((d) => {
          if (d.render == null) {
            return { ...d, render: (text) => hb(text) };
          } else {
            return d;
          }
        })}
        dataSource={dataSource}
        loading={loading}
        scroll={{ x: "max-content" }}
        pagination={{
          ...pagination,
          showSizeChanger: true,
          pageSizeOptions: ["5", "10", "20", "50"],
          showTotal: (total) => `共 ${total} 条`,
          onChange: onPageChange,
        }}
        rowKey="id"
      />
    </div>
  );
};

export default MyTemplate1;
